<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>XXMS - Tables</title>

<link href="<%=request.getContextPath()%>/css/bootstrap.min.css" rel="stylesheet">
<link href="<%=request.getContextPath()%>/css/datepicker3.css" rel="stylesheet">
<link href="<%=request.getContextPath()%>/css/bootstrap-table.css" rel="stylesheet">
<link href="<%=request.getContextPath()%>/css/styles.css" rel="stylesheet">

<!--[if lt IE 9]>
<script src="<%=request.getContextPath()%>/js/html5shiv.js"></script>
<script src="<%=request.getContextPath()%>/js/respond.min.js"></script>
<![endif]-->

</head>

<body>
	<jsp:include page="../header.jsp"></jsp:include>
	
	<jsp:include page="../sidebar.jsp"></jsp:include>

	<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
		<div class="row">
			<ol class="breadcrumb">
				<li><a href="#"><span class="glyphicon glyphicon-home"></span>
				</a>
				</li>
				<li class="active">Tables->Advanced Table</li>
			</ol>
		</div>
		<!--/.row-->

		<div class="row">
			<div class="col-lg-12">
				<div class="panel panel-default">
					<div class="panel-heading">Advanced Table(Goods information)</div>
					<div class="panel-body">
						<table data-toggle="table" data-url="getAllGoods.action"
							data-show-refresh="true" data-show-toggle="true"
							data-show-columns="true" data-search="true"
							data-select-item-name="toolbar1" data-pagination="true"
							data-sort-name="name" data-sort-order="desc">
							<thead>
								<tr>
									<th data-field="state" data-checkbox="true">Item ID</th>
									<th data-field="id" data-align="center">商品ID</th>
						        	<th data-field="name" data-align="center">商品名</th>
						        	<th data-field="price" data-align="center">价格</th>
						        	<th data-field="number" data-align="center">库存数量</th>
						        	<th data-field="supplier" data-align="center">供货商</th>
						        	<th data-field="category" data-align="center">商品类别</th>
								</tr>
							</thead>
						</table>
					</div>
				</div>
			</div>
		</div>
		<!--/.row-->

	</div>
	<!--/.main-->

	<script src="<%=request.getContextPath()%>/js/jquery-1.11.1.min.js"></script>
	<script src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script>
	<script src="<%=request.getContextPath()%>/js/chart.min.js"></script>
	<script src="<%=request.getContextPath()%>/js/chart-data.js"></script>
	<script src="<%=request.getContextPath()%>/js/easypiechart.js"></script>
	<script src="<%=request.getContextPath()%>/js/easypiechart-data.js"></script>
	<script src="<%=request.getContextPath()%>/js/bootstrap-datepicker.js"></script>
	<script src="<%=request.getContextPath()%>/js/bootstrap-table.js"></script>
	<script>
		!function($) {
			$(document)
					.on(
							"click",
							"ul.nav li.parent > a > span.icon",
							function() {
								$(this).find('em:first').toggleClass(
										"glyphicon-minus");
							});
			$(".sidebar span.icon").find('em:first').addClass("glyphicon-plus");
		}(window.jQuery);

		$(window).on('resize', function() {
			if ($(window).width() > 768)
				$('#sidebar-collapse').collapse('show')
		})
		$(window).on('resize', function() {
			if ($(window).width() <= 767)
				$('#sidebar-collapse').collapse('hide')
		})
	</script>
</body>

</html>
